<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="i in banners" :key="i.id">
        <div class="swipe-wrapper">
          <van-image :src="i.imageUrl" />
          <van-tag type="primary">{{ i.typeTitle }}</van-tag>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      banners: []
    }
  },
  mounted() {
    this.getBanner({ type: 0 }).then((res) => {
      console.log(res)
      if (res.data.code === 200) {
        this.banners = res.data.banners
      }
    })
  },
  methods: {
    ...mapActions(['getBanner'])
  }
}
</script>

<style lang="scss" scoped>
.van-swipe-item {
  width: 100%;
}
.swipe-wrapper {
  position: relative;
  .van-tag {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>
